import { Dropdown, Space } from "antd"
import { PropsWithChildren, useEffect, useState } from "react"

const Operations: React.FC<PropsWithChildren> = ({children}) => {
  const [content, setContent] = useState<React.ReactNode>()

  useEffect(() => {
    if (!Array.isArray(children)) {
      setContent(children)
      return
    }
    const _children = children.filter((item: any) => item.props.accessible !== false)
    if (_children.length <= 4) {
      setContent(children)
      return
    }
    const result = []
    const items: any = []
    _children.forEach((item: any, index: number) => {
      if (item.props.accessible !== false) {
        if (result.length < 3) {
          result.push(item)
        } else {
          items.push({label: item, key: index})
        }
      }
    })
    result.push(<Dropdown key='dropdown' menu={{items}}>
      <a>...</a>
    </Dropdown>)
    setContent(result)
  }, [children])

  return (
    <Space>
      {content}
    </Space>
  )
}

export default Operations
